Wie man alle JavaScript Events in die Konsole loggt
Chrome Dev ToolsLasst uns schauen wie man alle vorgehenden JavaScript Events in die Browser Konsole loggen kann, mit einem simplen Trick.
Es ist wichtig den Stream von Events zu überblicken, wenn man beispielsweise auf einer Webseite ein Form-Element debuggen möchte. Diese senden des öfteren mehrere Submit Events, so dass zu viele Events an Google Analytics gesendet werden.
Mit dieser Methode kannst du bei sämtlichen Problemen mit Browser Events prüfen, ob der Ursprung im Code selbst oder im Browser liegt.
All Events in JavaScript durch Event Listener loggen
Es gibt einen nützlichen API in Chrome Developer Tools, der uns dabei hilft.
Der monitorEvents API erlaubt uns alle vorgehenden JavaScript events in die Konsole zu loggen. Du musst nur ein Element und optional einen Event angeben:
//syntax//monitorEvents(element,event)//listen to all eventsmonitorEvents(window);//stop listeningunmonitorEvents(window);
Um den Listener z.B. auf alle Submit Events einzustellen, gibt man den Event Namen an:
//start listeningmonitorEvents(window,"submit");//stop listeningunmonitorEvents(window,"submit");
Beispiel: Wie man alle Klick-Events in die Konsole loggt
Mit dieser nützlichen Funktion können wir zum Beispiel Form Elemente in Chrome Dev Tools beobachten, um zu prüfen, ob mehrere Submit-Events gesendet werden.
Nachdem man ein Element im Elements Tab anklickt, zeigt Chrome Dev Tools ein kleines $0 Zeichen direkt daneben.
Du kannst das Element angeklickt lassen und nun $0 als Referenz zum HTML-Element nutzen, anstatt z.B. eines CSS-Selektors.
Zusammen mit dem monitorEvents API können wir also sehr schnell und einfach alle JavaScript events in der Konsole anzeigen lassen:
Diese Methode ist beim Debugging von Event Tracking sehr hilfreich, da alle JavaScript events untersucht werden können ohne zum Beispiel den GTM Debugger zu nutzen.
Das war's. Den Chrome Dev Tools API zu nutzen ist die einfachste und schnellste Methode um Events in die Konsole zu loggen.
Schreib mir auf Twitter ob's Dir geholfen hat. ✌️
